<template>
    <div class="withdraw-page">
        <TopTitleExit title="Withdraw" :exit="routerExit" :has_right_btn="true" right_btn_icon="/icon/record.svg" :btnClick="() => { routerTo('/deposit/withdraw_record') }"></TopTitleExit>
        <div class="body">
            <!-- <div class="input-box">
                <div class="title">Withdraw Amount (USD)</div>
                <div class="input-line">
                    <div class="t">$</div>
                    <input type="number" placeholder="0.00" min="0.00" step="0.00" v-model="withdrawPage.amount"></input>
                </div>
                <div class="select-list">
                    <div class="select-item" v-for="item in select_list" :key="item.id" @click="withdrawPage.amount = item.value" :style="`background-color: ${ item.value == withdrawPage.amount ? 'var(--active-light-color)' : 'var(--bg-color)' }; border: 0.1vw solid ${ item.value == withdrawPage.amount ? 'var(--active-color)' : 'var(--border-color)' }`">${{ item.value }}</div>
                </div>
            </div>
            <div class="data-box">
                <div class="title">Balance</div>
                <div class="v">${{ userInfo.balance }}</div>
            </div>
            <div class="data-box">
                <div class="title">Fee</div>
                <div class="v">${{ (withdrawPage.amount * fee.fee_rate).toFixed(2) }}</div>
            </div>
            <div class="data-box">
                <div class="title">Service Fee</div>
                <div class="v">${{ (withdrawPage.amount * fee.service_fee_rate).toFixed(2) }}</div>
            </div> -->
            <div class="select-line">
                <div class="select-box" tabindex="0" @focusin="focusin" @focusout="focusout">
                    <div class="active-item">
                        <div class="select-item">
                            <div class="icon" :style="`--icon: url(${ active_network.icon })`"></div>
                            <div class="name">{{ active_network.name }}</div>
                            <div class="text">{{ active_network.text }}</div>
                        </div>
                    </div>
                    <div class="select-list" v-show="show_network_selector">
                        <div class="select-item" v-for="item in show_network_list" :key="item.id" @click.stop="changeNetwork(item)">
                            <div class="icon" :style="`--icon: url(${ item.icon })`"></div>
                            <div class="name">{{ item.name }}</div>
                            <div class="text">{{ item.text }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="input-line">
                <div class="title">Withdraw address</div>
                <div class="input-box">
                    <input type="text" placeholder="Enter withdraw address" />
                    <div class="icon" style="--icon: url(/icon/saoma.svg)"></div>
                </div>
            </div>
            <div class="input-line">
                <div class="title">Amount</div>
                <div class="input-box">
                    <input type="text" placeholder="Enter withdraw amount" v-model="withdrawPage.amount" />
                    <div class="right-box">
                        <div class="unit">USDT</div>
                        <div class="btn">All</div>
                    </div>
                </div>
                <div class="value-line">
                    <div class="k">Available</div>
                    <div class="v">0.00 USDT</div>
                </div>
                <div class="fee-line">
                    <div class="val">
                        <div class="k">Fee</div>
                        <div class="v">1 USDT</div>
                    </div>
                    <div class="val">
                        <div class="k">Minimum withdrawal amount</div>
                        <div class="v">30 USDT</div>
                    </div>
                </div>
            </div>
            <div class="footer-line">
                <div class="text">1. Make sure you select the same network for this withdrawal as the one on deposit side, and check that receiving platform supports the network. Otherwise, you will lose your assets.</div>
                <div class="text">2. Network blocks will confirm your withdrawal after platform approves your apply.</div>
                <div class="text">3. The withdraw requires at least 10 network blocks for confirmation. After confirmation, your account will automatically receive the funds.</div>
            </div>
        </div>
        <div class="footer">
            <!-- <div class="data-box">
                <div class="title">You will Receive: </div>
                <div class="v">${{ (withdrawPage.amount * (1 - fee.fee_rate - fee.service_fee_rate)).toFixed(2) }}</div>
            </div> -->
            <div class="btn-box" @click="">
                <div class="btn">Withdraw Now {{ withdrawPage.amount }} USDT</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import TopTitleExit from '@/components/common/TopTitleExit.vue';
import { withdrawPage, depositService } from '@/service/deposit.js';
import { userInfo } from '@/service/user.js';
import { ref, reactive, computed } from 'vue';
import { routerExit, routerTo } from '@/utils/jump';

const fee = reactive({
    fee_rate: 0.025,
    service_fee_rate: 0.025,
});

const select_list = [
    { id: 1, value: 100 },
    { id: 2, value: 500 },
    { id: 3, value: 1000 },
    { id: 4, value: 2000 },
    { id: 5, value: 5000 },
    { id: 6, value: 10000 },
];

// 控制下拉框的逻辑如下
const network_list = [
    {
        id: 1,
        name: 'USDT-TRC20',
        text: 'Tether',
        icon: '/network/USDT.svg',
    },
    {
        id: 2,
        name: 'USDT-ERC20',
        text: 'Tether',
        icon: '/network/USDT.svg',
    },
    {
        id: 3,
        name: 'BTC',
        text: 'Bitcoin',
        icon: '/network/Bitcoin.svg',
    },
    {
        id: 4,
        name: 'ETH',
        text: 'Ethereum',
        icon: '/network/Ethereum.svg',
    },
];

const show_network_list = computed(() => {
    let res = [];
    for (let i = 0; i < network_list.length; i++) {
        let item = network_list[i];
        if (active_network.value.id != item.id) res.push({
            id: item.id,
            name: item.name,
            text: item.text,
            icon: item.icon,
        });
    }
    return res;
});

const active_network = ref(network_list[0]);

const show_network_selector = ref(false);

function focusin() {
    show_network_selector.value = true;
}

function focusout() {
    show_network_selector.value = false;
}

function changeNetwork(item) {
    // 修改数据
    active_network.value = item;
    // 强行失焦
    const el = document.querySelector('.select-box');
    el.blur();
}
</script>

<style scoped lang="less">
.withdraw-page {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    width: 100vw;
    height: 100vh;
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto;

    .body {
        // min-height: calc(100vh - 15vw);
        padding: 5vw;
        display: flex;
        flex-direction: column;
        gap: 5vw;

        // .input-box {
        //     display: flex;
        //     flex-direction: column;
        //     gap: 2vw;

        //     .title {
        //         font-size: 4vw;
        //         font-weight: 500;
        //     }

        //     .input-line {
        //         display: flex;
        //         align-items: center;
        //         gap: 1vw;
        //         padding: 1vw 2vw;
        //         border: 0.1vw solid var(--border-color);
        //         border-radius: 1vw;

        //         .t {
        //             font-size: 4vw;
        //         }

        //         input {
        //             flex: 1;
        //             height: 6vw;
        //             border: 0;
        //             outline: 0;
        //             font-size: 4vw;
        //         }
        //     }

        //     .select-list {
        //         display: grid;
        //         grid-template-columns: repeat(3, 1fr);
        //         gap: 1vw;

        //         .select-item {
        //             font-size: 3vw;
        //             text-align: center;
        //             padding: 2vw 4vw;
        //             border-radius: 1vw;
        //         }
        //     }

        //     .upload-file-line {
        //         width: 100%;
        //         height: 70vw;
        //         --border-width: 0.5vw;
        //         --add-icon-size: 10vw;
        //         position: relative;

        //         .empty, .img, input {
        //             display: block;
        //             width: 100%;
        //             height: 100%;
        //             position: absolute;
        //             top: 0;
        //             left: 0;
        //         }

        //         .empty {
        //             border: var(--border-width) dashed var(--border-color);
        //             border-radius: 3vw;

        //             &::before, &::after {
        //                 content: '';
        //                 position: absolute;
        //                 top: 50%;
        //                 left: 50%;
        //                 transform: translate(-50%, -50%);
        //                 background: var(--border-color);
        //             }

        //             &::before {
        //                 width: var(--border-width);
        //                 height: var(--add-icon-size);
        //             }

        //             &::after {
        //                 width: var(--add-icon-size);
        //                 height: var(--border-width);
        //             }
        //         }

        //         input {
        //             opacity: 0;
        //         }
        //     }
        // }

        // .data-box {
        //     display: flex;
        //     justify-content: space-between;
        //     align-items: center;

        //     .title {
        //         color: var(--text-light-color);
        //         font-size: 4vw;
        //         font-weight: 600;
        //     }

        //     .v {
        //         color: var(--text-light-color);
        //         font-size: 3.5vw;
        //     }
        // }

        .select-line {
            width: 100%;
            height: 13vw;
            background-color: var(--bg-strong-color);
            border-radius: 2vw;

            .select-box {
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                padding: 2vw 4vw;
                position: relative;

                &::after {
                    content: '';
                    display: block;
                    --size: 2vw;
                    width: var(--size);
                    height: var(--size);
                    border-right: 0.3vw solid var(--text-color);
                    border-bottom: 0.3vw solid var(--text-color);
                    position: absolute;
                    top: 50%;
                    right: 5vw;
                    transform: translateY(-50%) rotate(45deg);
                }

                .active-item {
                    width: 100%;
                    height: 100%;

                    .select-item {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        gap: 3vw;

                        .icon {
                            --size: 6.5vw;
                            --w: var(--size);
                            --h: var(--size);
                        }

                        .name {
                            font-size: 3.5vw;
                            font-weight: 600;
                        }

                        .text {
                            font-size: 3vw;
                            color: var(--text-light-color);
                        }
                    }
                }

                .select-list {
                    width: 100%;
                    position: absolute;
                    top: 100%;
                    left: 0;
                    background-color: var(--bg-color);

                    .select-item {
                        box-sizing: border-box;
                        width: 100%;
                        height: 100%;
                        padding: 3vw 4vw;
                        display: flex;
                        align-items: center;
                        gap: 3vw;

                        .icon {
                            --size: 6.5vw;
                            --w: var(--size);
                            --h: var(--size);
                        }

                        .name {
                            font-size: 3.5vw;
                            font-weight: 600;
                        }

                        .text {
                            font-size: 3vw;
                            color: var(--text-light-color);
                        }
                    }
                }
            }
        }

        .input-line {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 2vw;

            .title {
                font-size: 3.5vw;
                font-weight: 500;
            }

            .input-box {
                box-sizing: border-box;
                width: 100%;
                height: 8vw;
                padding: 0 3vw;
                border-radius: 2vw;
                background-color: var(--bg-strong-color);
                display: flex;
                align-items: center;

                input {
                    flex: 1;
                    font-size: 3vw;
                    border: 0;
                    outline: 0;
                    background-color: #00000000;
                }

                .icon {
                    --size: 4vw;
                    --w: var(--size);
                    --h: var(--size);
                }

                .right-box {
                    display: flex;
                    align-items: center;
                    gap: 2vw;

                    .unit, .btn {
                        font-size: 3vw;
                    }
                    
                    .unit {
                        color: var(--text-light-color);
                    }
                }
            }

            .value-line {
                display: flex;
                justify-content: space-between;

                .k, .v {
                    font-size: 3vw;
                }

                .k {
                    color: var(--text-light-color);
                }
            }

            .fee-line {
                box-sizing: border-box;
                padding: 3vw;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                gap: 2vw;
                border-radius: 2vw;
                background-color: var(--bg-color);

                .val {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .k, .v {
                    font-size: 3vw;
                }

                .k {
                    color: var(--text-light-color);
                }
            }
        }

        .footer-line {
            box-sizing: border-box;
            width: 100%;
            padding: 4vw;
            border-radius: 2vw;
            box-shadow: 0 0 5vw rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
            gap: 3vw;

            .text {
                font-size: 3vw;
                color: var(--text-color);
            }
        }
    }

    .footer {
        background-color: #fff;
        box-sizing: border-box;
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        padding: 4vw;
        display: flex;
        flex-direction: column;
        gap: 5vw;
        // border-top: 0.1vw solid var(--border-color);

        // .data-box {
        //     display: flex;
        //     justify-content: space-between;
        //     align-items: center;

        //     .title {
        //         color: var(--text-light-color);
        //         font-size: 4vw;
        //         font-weight: 600;
        //     }

        //     .v {
        //         color: var(--text-light-color);
        //         font-size: 3.5vw;
        //     }
        // }

        .btn-box {
            width: 100%;
            display: flex;
            gap: 2vw;

            .btn {
                flex: 1;
                height: 10vw;
                border-radius: 1.5vw;
                display: flex;
                justify-content: center;
                align-items: center;
                background: var(--active-color);
                font-size: 3.5vw;
                font-weight: 600;
                color: #fff;
            }
        }
    }
}
</style>